<script lang="ts" setup>
import { Delete } from '@element-plus/icons-vue'

const tableData = [
  {
    id: '1',
    name: '学工部',
    createtime: '2025-06-10 22:25:43',
    updatetime: '2025-06-12 13:37:05'
  },
  {
    id: '2',
    name: '教研部',
    createtime: '2025-06-10 22:25:43',
    updatetime: '2025-06-12 13:37:05'
  },
  {
    id: '3',
    name: '咨询部',
    createtime: '2025-06-10 22:25:43',
    updatetime: '2025-06-12 13:37:05'
  },
  {
    id: '4',
    name: '就业部',
    createtime: '2025-06-10 22:25:43',
    updatetime: '2025-06-12 13:37:05'
  },
  {
    id: '5',
    name: '人事部',
    createtime: '2025-06-10 22:25:43',
    updatetime: '2025-06-12 13:37:05'
  }
]

// 示例操作函数
const handleEdit = (row) => {
  console.log('点击了修改:', row)
}

const handleDelete = (row) => {
  console.log('点击了删除:', row)
}
</script>

<template>
  <div style="margin: 30px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="Id" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="createtime" label="createTime" />
      <el-table-column prop="updatetime" label="updateTime" />

      <!-- 操作列 -->
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped></style>
